<template>
	<view>
		<view class="swiper" v-animate-on-scroll>
		  <u-swiper :list="datalist.imageUrl" :height="420"></u-swiper>
		</view>
		<view class="content">
			<view class="title">{{datalist.name}}</view>
			<view class="time">
			    <image src="/static/as1.png" mode="widthFix"></image>
				<view class="adds"><text>场馆地址</text>：<view>{{datalist.address}}</view></view>
			</view>
			<view class="quota">
				<image src="/static/as.png" mode="widthFix"></image>
				营业时间：{{datalist.startTime + '-' + datalist.endTime}}
			</view>
			<view class="phone" @click="Makphone(datalist.phoneNumber)">
				<image src="/static/phone.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="fwconten">
			<view class="u-content">
			  <u-parse :html="datalist.description"></u-parse>
			</view>
		</view>
		<!-- <view class="btn" @click="Redeem(datalist.id)">立即报名</view> -->
	</view>
</template>

<script>
	import {  venueinfo } from '@/core/api/index.js'
	export default{
		data(){
			return{
				datalist:{}
			}
		},
		onLoad(r) {
			console.log(r)
			this.ActivityInfo(r.id)
		},
		methods:{
			Makphone(nb){
					  uni.makePhoneCall({
					  	phoneNumber: nb //仅为示例
					  });
			},
			async ActivityInfo(id){
				const { data } = await venueinfo(id)
				console.log(data)
				if (data && data.imageUrl && Array.isArray(data.imageUrl)) {
				   data.imageUrl = data.imageUrl.map(url => {
				     // 确保每个URL都以https开头
				     if (url && !url.startsWith('http')) {
				       return 'https:' + url
				     }
				     return url
				   })
				 }
				this.datalist = data
			},
			Redeem(id){
				uni.navigateTo({
					url:'/pages/activity/registration?id=' + id + '&meng=' + (this.datalist.quota - this.datalist.registered)
				})
			}
		}
	}
</script>

<style lang="scss">
	.time{
	  color: #666666;
	  font-size: 24rpx;
	  display: flex;
	  // align-items: center;
	      align-items: baseline;
	  image{
		  margin-right: 8rpx;
		  width: 26rpx;
	  }
	}
	.phone{
		position: absolute;
		    width: 74rpx;
		    top: 27%;
		    right: 9%;
		image{
			width: 100%;
		}
	}
	.adds{
		display: flex;
		view{
			// line-height: 40rpx;
			width: 390rpx;
		}
	}
	.content{
		position: relative;
		background-color: #fff;
		padding: 10rpx 30rpx 30rpx;
		.title , .time{
		  // padding-left: 30rpx;
		}
		.title{
		  font-size: 32rpx;
		  margin: 10rpx 0 0rpx;
		}
		.time{
		  color: #666666;
		  font-size: 26rpx;
		  margin: 15rpx 0;
		}
		.quota{
			color: #666666;
			font-size: 26rpx;
			// font-size: 24rpx;
			display: flex;
			align-items: center;
			image{
					  margin-right: 8rpx;
					  width: 26rpx;
			}
		}
	}
	.fwconten{
		padding: 40rpx 30rpx;
		background-color: #fff;
		min-height: 700rpx;
		margin-top: 30rpx;
		.rules{
			font-size: 28rpx;
			margin-bottom: 10rpx;
		}
		.u-content{
			// color: #666666;
			// font-size: 24rpx;
			line-height: 43rpx;
			margin-bottom: 30rpx;
		}
	}
	.btn{
		width: 90%;
		height: 70rpx;
		background-color: #EC691B;
		margin-top: 47rpx;
		color: #fff;
		line-height: 70rpx;
		margin: 50rpx auto;
		text-align: center;
	}
</style>